<template>
  <div class="home-container">
    <div class="home-content">
      <!-- <Button @click="getUserData">ajax 测试</Button>
      <Input
        :rows="30"
        style="margin-top: 20px"
        v-model="userInfo"
        type="textarea"
      /> -->
      <transition>
      <div>
          <Button
          type="primary"
          ghost
          to="./users"
          size="large"
          style="width:200px;position: absolute;top:130px;left: 16%;"
        >用户管理</Button>
        <Button
          type="primary"
          ghost
          to="./roles"
          size="large"
          style="width:200px;position: absolute;top:300px;left:12%;"
        >角色管理</Button>
        <Button
          type="primary"
          ghost
          to="./queryProducts"
          size="large"
          style="width:200px;position: absolute; top:500px;left:16%;"
        >产品管理</Button>
        <Button
          type="primary"
          ghost
          to="./carts"
          size="large"
          style="width:200px;position: absolute;top:130px;left: 58%;"
        >购物车管理</Button>
        <Button
          type="primary"
          ghost
          to="./carts"
          size="large"
          style="width:200px;position: absolute;top:300px;left: 62%;"
        >系统管理</Button>
        <Button
          type="primary"
          ghost
          to="./menus"
          size="large"
          style="width:200px;position: absolute; top:500px;left:58%;"
        >菜单管理</Button>
      </div>
      </transition>

      <div
        class="circle"
        @click="add"
      >
        <i-circle
          :percent="percent"
          :stroke-color="color"
          style="position: absolute; top:240px;left:39%;width:160px;height:160px"
        >
          <Icon
            v-if="percent == 100"
            type="ios-checkmark"
            size="80"
            style="color:#5cb85c;"
          ></Icon>
          <span
            v-else
            style="font-size:24px"
          >{{ percent }}%</span>
        </i-circle>
      </div>

      <div
        class="circle"
        @click="add"
      >
        <i-circle
          :percent="percent"
          :stroke-color="color"
          style="position: absolute; top:240px;left:39%;width:160px;height:160px"
        >
          <Icon
            v-if="percent == 100"
            type="ios-checkmark"
            size="80"
            style="color:#5cb85c;"
          ></Icon>
          <span
            v-else
            style="font-size:24px"
          >{{ percent }}%</span>
        </i-circle>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  data() {
    return {
      // userInfo: "",
      percent: 0,
    }
  },
  computed: {
    color() {
      let color = 'red'
      if (this.percent == 100) {
        color = '#5cb85c'
      }
      return color
    },
  },
  created() {
    // this.add()
    // this.minus()
  },
  methods: {
    add() {
      if (this.percent >= 100) {
        return false
      }
      this.percent = 100
    },
    minus() {
      if (this.percent <= 0) {
        return false
      }
      this.percent = 0
    },
  },
}
</script>

<style scoped>
.home-container {
  height: 100%;
  padding: 10px;
  padding-top: 5px;
}

.home-content {
  padding: 10px;
  height: 100%;
  width: 100%;
  border-radius: 5px;
  background: #fff;
  position: relative;

  /* background: url('./../../public/1.png') no-repeat left center; */
  /* background-size: 100% 100%; */
}
</style>
